import React from 'react'
import { Modal, List, Button, WingBlank } from 'antd-mobile';
import axios from 'axios';
import * as api from '../../utils/Zxapi'
import ZxHoc from '../ZxHoc/ZxHoc'
import axiosFun from '../../utils/ZxAxios'

function closest(el, selector) {
    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
    while (el) {
      if (matchesSelector.call(el, selector)) {
        return el;
      }
      el = el.parentElement;
    }
    return null;
  }
  
  class ZxNotice extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        setName: '',
      };
    }
    /* 这个是父组件有数据变化  子组件会及时更新的事件  如果你只执行一次 不用反复执行  就不用管 */
    componentWillReceiveProps(props){
      // console.log(props)
       let {data,storeData}=props
      /* 设置公告 */
        if(data.titleId==1){
            this.setState({
              setName:storeData.shop_bulletin
            })  
            // console.log(storeData.shop_bulletin);    
            /* 起步价 */
        }else if(data.titleId==2){
            this.setState({
              setName:storeData.shop_start_price
            })  
            /* 配送距离 */
        }else if(data.titleId==3){
          this.setState({
            setName:storeData.shop_delivery_dis
          })  
          /* 外卖电话 */
        }else if(data.titleId==4){
          this.setState({
            setName:storeData.shop_phone
          })  
          /* 店铺地址 */
        }else if(data.titleId==5){
          this.setState({
            setName:storeData.shop_address
          })  
         }
        // console.log(this.state.setName);
    }
    // componentDidMount(){
    //   console.log(this.props)

    // }
    /* inpu框的双向绑定 */
    NameChange(e){
      let {data}=this.props
      const {value}=e.target
      /* 这里判断设置权益的正则===vip会员的权益设置 */
      const reg= /^([0-9]*)?$/
      const regPhone= /^1([0-9]*)?$/
      if(data.titleId===6){
        if((reg.test(value)&& value.length < 2) || value === ''){
          this.setState({
            setName:value
          })
        }   
        /* 判断手机号嘛 */
      // }if(data.titleId===3){
      //    console.log(3333333)
      //   if((regPhone.test(value) && value.length < 12) || value === ''){
      //     this.setState({
      //       setName:value
      //     })
      //   }
      }else{
        this.setState({
          setName:value
        })
      }
      // console.log(e.target.value)
    }
    // 点击提交==上传数据到数据库
    subMit(e){
      let {data,onClose}=this.props
        e.preventDefault();
        // 提交时，拿到最新的输入数据
        // console.log(data.titleId)
       
            /* 设置公告 */
        if(data.titleId==1){
          this.getUpdateSet()
          /* 起步价 */
        }else if(data.titleId==2){
          this.getUpdateStartPrice()
            /* 配送距离 */
        }else if(data.titleId==3){
          this.getUpdateDelivey()
          /* 外卖电话 */
        }else if(data.titleId==4){
          this.getUpdatePhone()
          /* 店铺地址 */
        }else if(data.titleId==5){
          this.getUpdateAddress()
        }else if(data.titleId==6){
          this.getVipDiscount()
        }
        onClose('modal2')()
    }

    /* 修改设置公告 */
    getUpdateSet=()=>{
    //  let params={
    //     shop_bulletin:this.state.setName,
    //     shop_phone:'1'
    //     }
      axiosFun(api.GET_STOPUPDATENOTICE,
        {
        shop_bulletin:this.state.setName,
        shop_phone:'1'
        },this)
    }
    /* 修改起步价 */
    getUpdateStartPrice=()=>{
      axiosFun(api.GET_STOPUPDATESTARTPRICE,
        {
              shop_start_price:this.state.setName,
              shop_phone:'1'
              },this)
    //   axios({
    //     url:api.GET_STOPUPDATESTARTPRICE,
    //     method:'get',
    //     params:{
    //     shop_start_price:this.state.setName,
    //     shop_phone:'1'
    //     }
    // }).then(data=>{
    //   if(data.data.code==200){
    //     this.setState({
    //       setName:data.data.data    
    //     })
    //     alert('修改成功')
    //   }
    // }).catch(err=>{

    // })
    }
     /* 修改配送距离 */
     getUpdateDelivey=()=>{
      axios({
        url:api.GET_STOPUPDATEDELIVER,
        method:'get',
        params:{
        shop_delivery_dis:this.state.setName,
        shop_phone:'1'
        }
    }).then(data=>{
      if(data.data.code==200){
        this.setState({
          setName:data.data.data
        })
      }
    }).catch(err=>{

    })
    }
     /* 修改外卖电话 */
    getUpdatePhone=()=>{
      axios({
        url:api.GET_STOPUPDATEPHONE,
        method:'get',
        params:{
        takeaway_phone:this.state.setName,
        shop_phone:'1'
        }
    }).then(data=>{
      if(data.data.code==200){
        this.setState({
          setName:data.data.data
        })
      }
    }).catch(err=>{

    })
    }
      /* 修改店铺地址 */
    getUpdateAddress=()=>{
      axios({
        url:api.GET_STOPUPDATEADDRESS,
        method:'get',
        params:{
        shop_address:this.state.setName,
        shop_phone:'1'
        }
    }).then(data=>{
      if(data.data.code==200){
        this.setState({
          setName:data.data.data         
        })
      }
    }).catch(err=>{

    })
    }

    //会员中心页面的=======
    /* 会员中心==提交==设置会员权益 */
    getVipDiscount=()=>{
      // console.log(123456)
      axios({
        url:api.GET_STOPVIPDISCOUNT,
        method:'get',
        params:{
          shop_phone:'1',
          vip_discount:this.state.setName,
        }
    }).then(data=>{
      if(data.data.code==200){
        this.setState({
          setName:data.data.data
        })
      }
      // console.log(data);
    })
   }
    render() {
        let {data,modal2,onClose,handleSubmit,useOnChange,setName}=this.props
        // console.log(this.props);
        // console.log(use);
        // console.log(handle);
      return (
        <WingBlank>
          <Modal
            popup
            visible={modal2}
            onClose={onClose('modal2')}
            animationType="slide-up"
            // afterClose={() => { alert('设置成功'); }}
          > 
            <List renderHeader={() => <div>{data.tiName}</div>} className="popup-list">
                <List.Item key={data.titleId}>
                  <label htmlFor="menuName" className='labelName'>{data.tiName}:
                       <input  onChange={e=>this.NameChange(e)}  
                       type='text' 
                      //  onKeyUp={this.testIuput}
                       name="" id="" 
                       className='inputName'
                       value={this.state.setName}
                       />
                  </label>
                </List.Item>
                <List.Item>
                    <Button type="primary"  onClick={this.subMit.bind(this)}>{data.btnName}</Button>
                </List.Item>
            </List>
          </Modal>
        </WingBlank>
      );
    }
  }
/*   onClick={onClose('modal2')} */
export default ZxHoc(ZxNotice)
// export default ZxNotice